<template>
	<view class="Global">
<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<!-- 筛选栏 -->
		<view class="searchPickerContent">

			<view class="searchPickerContentBg">
				<text class="searchPickerText">打印菲票</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

			<view class="searchPickerContentBg">
				<text class="searchPickerText">工序分类</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

		</view>

		<!-- 筛选栏 -->
		<view class="searchPickerContent">

			<view class="searchPickerContentBg" @click="selectZhiDan()">
				<text class="searchPickerText" v-if="orderData.id!=undefined">制单号 {{':'+orderData.orderCode }}</text>
				<text class="searchPickerText" v-else>制单号</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

			<view class="searchPickerContentBg">
				<text class="searchPickerText" v-if="orderData.id!=undefined">款号 {{':'+orderData.styleName }}</text>
				<text class="searchPickerText" v-else>款号</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

		</view>




		<!-- 列表内容开始 -->
		<view class="contentCenter">


			<view class="contentCenterTop">
				<text class="contentCenterTopLeftText">选择要打印的扎号</text>
				<input class="contentCenterTopInput" type="text" value="1" />
				<text class="contentCenterTopLine">-</text>
				<input class="contentCenterTopInput" type="text" value="10" />
				<text class="contentCenterTopLeftText">扎</text>
			</view>





			<view class="contentCenterTitle" id="main">
<!--				<text class="contentCenterTitleTextCZ">操作</text>-->
				<text class="contentCenterTitleText2">序号</text>
				<text class="contentCenterTitleText1">颜色</text>
				<text class="contentCenterTitleText">尺码</text>
				<text class="contentCenterTitleText">扎号</text>
				<text class="contentCenterTitleText">数量</text>
<!--				<text class="contentCenterTitleText1">工序分类</text>-->
			</view>





			<!-- 数据列表开始 -->
			<scroll-view scroll-y="true" class="contentCenterListOut" :style="'height:'+scrollViewHeight+'px'">
				<view class="contentCenterListOutInner">
					<view class="contentCenterList" v-for="(item,index) in printDataList"  :style="{background: (index%2==0?'#EEEEEE':'#F9FCFF')}">
<!--            <button type="warn" size="mini" style="width: 18%;" >打印</button>-->
						<text class="contentCenterListText2">{{index+1}}</text>
						<text class="contentCenterListText1">{{item.colors}}</text>
						<text class="contentCenterListText">{{item.sizes}}</text>
						<text class="contentCenterListText">{{index+1}}</text>
						<text class="contentCenterListText">{{item.quantity}}</text>
<!--						<text class="contentCenterListText1"></text>-->
					</view>
				</view>
			</scroll-view>

			<!-- 数据列表结束 -->


		</view>
		<!-- 列表内容结束 -->





		<view class="loginContent" id="mainBottom">

				<button @click="bluetoothPrint()" style="color:#ffffff" class="login" type="default">{{login}}</button>
			</view>



	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
  import {getOrderPrint} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				login: '蓝牙打印',

				title: '打印菲票',

				isback: true,

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
        orderData: {},
        printDataList: [],
			}
		},
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();

		},
    onShow() {
      var that = this
      uni.$on('globleEvent', function(res) {
        console.log('选择制单号返回数据', res) //  为 B 页面传过来的值
        that.orderData = res.orderData
        // 移除监听事件
        uni.$off('globleEvent');
      })
      if(this.orderData!='' && this.orderData.id!=''){
        this.getOrderPrint(this.orderData.id)
      }
    },
		methods: {
      getOrderPrint(orderId){
          getOrderPrint(orderId).then(res=>{
            console.log('getOrderPrint',res);
            if(res.code==200){
              this.printDataList = res.data
            }
          })
        },
        // 制单号选择
        selectZhiDan(){
          uni.navigateTo({
            url: '/subPack/printedTicket/selectTheDocumentNumber/selectTheDocumentNumber',
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
        },
        bluetoothPrint(){
        console.log('orderData',this.orderData)
          if(Object.keys(this.orderData).length!==0){
            this.orderData.orderId = this.orderData.id
            uni.navigateTo({
              url: '/subPackA/cuttingOrder/printQRCode/printQRCode?item='+encodeURIComponent(JSON.stringify(this.orderData)),
              success: res => {},
              fail: () => {},
              complete: () => {}
            });
          }else {
            uni.showToast({
              title: '请先选择制单号！',
              icon: 'error'
            });
          }

        },
		}
	}
</script>

<style>


	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		/* background-color: #45A8FF; */
		position: absolute;
		bottom: 30rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;


		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}



  .contentCenterListText2 {
    width: 80rpx;
    height: 100%;

    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 24rpx;
    color: #333333;


    display: flex;
    justify-content: center;
    align-items: center;

    border-right: #FFFFFF 1rpx solid;
    /*border-left: #FFFFFF 1rpx solid;*/

  }

	.contentCenterListText1 {

		width: 35%;
		/*width: 25%;*/
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

    border-right: #FFFFFF 1rpx solid;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentCenterListText {
		width: 16%;
		/*width: 14.3%;*/
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;


		display: flex;
		justify-content: center;
		align-items: center;

		border-right: #FFFFFF 1rpx solid;


	}

	.contentCenterListOutInner{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 90rpx;
	}

	.contentCenterListOut {

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		width: 690rpx;
		/* height: 600rpx; */
		/* border-radius: 30rpx;
		background: #EEEEEE; */
		/* background: #0AE1C6; */
		/* margin-top: 20rpx; */
	}

	.contentCenterList {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;

	}

  .contentCenterTitleTextCZ {
    width: 18%;
    height: 100%;

    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 24rpx;
    color: #FFFFFF;

    border-right: #FFFFFF 1rpx solid;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contentCenterTitleText2 {
    width: 80rpx;
    height: 100%;

    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 24rpx;
    color: #FFFFFF;

    border-right: #FFFFFF 1rpx solid;
    display: flex;
    justify-content: center;
    align-items: center;
  }

	.contentCenterTitleText1 {
		width: 35%;
		/*width: 25%;*/
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;

    border-right: #FFFFFF 1rpx solid;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentCenterTitleText {
		width: 16%;
		/*width: 14.3%;*/
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;


		display: flex;
		justify-content: center;
		align-items: center;

		border-right: #FFFFFF 1rpx solid;


	}

	.contentCenterTitle {

		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		margin-top: 20rpx;

	}






	.contentCenterTopLine {

		width: 10rpx;
		height: 4rpx;
		background: #333333;
		border-radius: 2rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-right: 10rpx;
	}

	.contentCenterTopInput {

		display: flex;
		justify-content: center;
		align-items: center;

		width: 120rpx;
		height: 60rpx;
		background: #F5F7F9;
		border-radius: 10rpx;


		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #0081FF;


		margin-right: 10rpx;


	}

	.contentCenterTopLeftText {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;



		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;



	}

	.contentCenterTop {

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 30rpx;


	}

	.contentCenter {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 30rpx;
		width: 690rpx;
	}

	.searchPickerImg {
		width: 20rpx;
		height: 10rpx;
		margin-right: 20rpx;

	}

	.searchPickerText {

		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

	}

	.searchPickerContentBg {
		width: 330rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

	}

	.searchPickerContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;




	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}
</style>
